<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<spring:message code="labels.name" var="name"></spring:message>
<spring:message code="labels.add" var="add"></spring:message>
<spring:message code="labels.save" var="save"></spring:message>
<spring:message code="labels.cancel" var="cancel"></spring:message>

<div class="row-fluid">
	<div class="span9">
		<form id="congregation" class="well form-horizontal">
			<div class="control-group">
				<label class="control-label" for="name">${name }</label>
				<div class="controls">
					<input type="text" class="span3" name="name" placeholder="${name}" />
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<a id="save" class="btn"> ${add} <i class="icon-plus-sign"></i>
					</a> <a id="saveAndExit" class="btn" href="/admin/congregations">
						${save } <i class="icon-ok-sign"></i> </a> <a id="cancel" class="btn"
						href="/admin/congregations"> ${cancel } </a>
				</div>
			</div>

		</form>
	</div>
	<script type="text/javascript">
		require([ 'jquery', 'mustache', 'app',
				'text!templates/congregation/new.html', 'i18n!nls/messages',
				'domReady!' ], function($, m, a, cngTmpl, bdl) {
			function save(e) {
				return $.ajax({
					url : '/admin/congregation',
					type : 'PUT',
					dataType : 'json',
					data : $('form#congregation').serialize()
				}).error(function(err) {
					throw err;
				});
			}

			function exit() {
				a.go('/admin/congregations', '#content-container');
			}
			$('a#save').click(
					function(e) {
						save(e).success(
								function(data) {
									$('form#congregation').after(
											m.render(cngTmpl, $.extend(
													data.congregation, bdl)));
									$('form#congregation')[0].reset();
								});
					});
			$('a#cancel').click(function(e){
				e.preventDefault();
				exit();
			});
			$('a#saveAndExit').click(function(e) {
				e.preventDefault();
				save(e).success(exit);
			});

		});
	</script>
</div>